import {
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Text,
    View,
    Button,
    Image, FlatList, TouchableOpacity,
} from 'react-native';
import * as React from 'react';
import {DOMAIN_URL, getUserInfoList, deleteUserInfoById} from "../util/api";
import {PAGENAME} from "../util/PageName";
import {useEffect, useState} from "react";
import {useNavigation} from "@react-navigation/native";
import {style} from "../theme";

const UsersScreen = (props: { navigation: any }) => {
    const [selectedId, setSelectedId] = useState(null);
    const [userItemList, setUserItemList] = useState([]);
    const [value, setValue] = React.useState('full');
    const navigation = useNavigation();
    const scoreInfo = {
        total: 16,
        totalRank: 16,
        month: 16,
        monthRank: 16,
    };
    useEffect(() => {
        const unsubscribe = navigation.addListener(
            'focus',
            payload => {
                UserInfoList();
            }
        );
        return () => {
            unsubscribe();
        };
    }, [navigation]);
    const deleteUser = (userId: any) => {
        console.log(userId)
        deleteUserInfoById(userId).then((res) => {
            console.log(res)
            UserInfoList();
        });
    };
    const UserInfoList = () => {
        // 这里是你想要在A页面被重新聚焦时执行的方法
        //当页面重新获得焦点时，执行这个方法
        getUserInfoList(null).then((res) => {
            console.log(res)
            setUserItemList(res.rows);
        });
    };
    const renderItem = ({item}) => {
        // const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';

        return (
            <Item
                item={item}
                onPress={() => setSelectedId(item.id)}
                // style={{backgroundColor}}
            />
        );
    };

    const Item = ({item, onPress, style}) => (
        <View style={styles.indexDataRow} key={'event:' + item}>
            <TouchableOpacity
                onPress={onPress}
                style={{flexDirection: 'row', alignItems: 'center'}}>
                <View style={{flexDirection: 'row', marginLeft: 4, justifyContent: 'space-between'}}>
                    <Image
                        style={{width: 38, height: 38, borderRadius: 50}}
                        source={{
                            uri: `${DOMAIN_URL}/file/images/touxiang.jpg`,
                        }}></Image>
                </View>
                <View style={{marginLeft: 10, justifyContent: 'space-between'}}>
                    <Text
                        numberOfLines={1}
                        ellipsizeMode={'tail'}>
                        {item.loginName}
                    </Text>
                    <Text>{item.userName}</Text>
                </View>
                <View style={{marginLeft: 4, justifyContent: 'space-between'}}>
                    <Text>{item.deptName}</Text>
                    <Text>{item.groupName}</Text>
                </View>
            </TouchableOpacity>
            <View style={{flexDirection: 'row', alignSelf: 'center'}}>
                <TouchableOpacity onPress={() => {
                    props.navigation.push(PAGENAME.USER_EDIT, {userId: item.loginName});
                }}>
                    <Image source={require('../assets/images/icon/edit.png')} style={{
                        width: 20, // 图标宽度
                        height: 20, // 图标高度
                    }}/>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    deleteUser(item.userId)
                }}>
                    <Image source={require('../assets/images/icon/delete.png')} style={{
                        width: 20, // 图标宽度
                        height: 20, // 图标高度
                        marginLeft: 15,
                        marginRight: 10
                    }}/>
                </TouchableOpacity>
            </View>
        </View>
    );
    return (
        <SafeAreaView style={styles.container}>
           <FlatList
               data={userItemList}
               renderItem={renderItem}
               keyExtractor={item => item.id}
               extraData={selectedId}
           />
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginVertical: 8,
                    marginHorizontal: 8,
                    zIndex: 999,
                }}>
                <Text style={styles.title}></Text>
                <View>
                    <TouchableOpacity onPress={() => {
                        props.navigation.push(PAGENAME.USER_ADD);
                    }}>
                        <Image source={require('../assets/images/icon/add.png')} style={style.buttonIcon}/>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: StatusBar.currentHeight || 0,
        marginHorizontal: 8,
        marginTop: 16
    },
    scoreTotal: {
        // margin: 32,
        marginTop: 16,
        // backgroundColor: 'red',
        padding: 30,
        borderStyle: 'solid',
        borderColor: 'red',
        borderWidth: 2,
    },
    indexDataRow: {
        marginBottom: 10,
        flexDirection: 'row',
        borderStyle: 'solid',
        borderColor: '#000',
        borderWidth: 1,
        borderRadius: 4,
        padding: 8,
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 48,
    },
    title: {
        fontFamily: 'KaiTi',
        fontSize: 20,
        fontWeight: 'bold',
        marginVertical: 8,
    }
});

export default UsersScreen;
